<template>
    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        @close="handleClose"
        width="30%"
        v-dialogDrag
        append-to-body
    >
        <el-form
            ref="formRef"
            :model="formData"
            v-loading="formLoading"
            label-width="100px"
        >
            <el-form-item
                label="落地页模板"
                prop="templateId"
                :rules="[
                    {
                        required: true,
                        message: '请选择落地页模板',
                        trigger: 'blur',
                    },
                ]"
            >
                <el-select
                    v-model="formData.templateId"
                    style="width: 100%"
                    filterable
                    placeholder="请选择域名"
                >
                    <el-option
                        v-for="(item, index) in templateList"
                        :key="index"
                        :label="item.templateName"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="落地页名称" prop="landingPageName">
                <el-input
                    v-model="formData.landingPageName"
                    placeholder="请输入落地页名称"
                />
            </el-form-item>
            <el-form-item label="落地页描述" prop="landingPageDesc">
                <el-input
                    v-model="formData.landingPageDesc"
                    placeholder="请输入落地页描述"
                />
            </el-form-item>
            <el-form-item
                label="跳转地址"
                prop="jumpLinkUrl"
                :rules="[
                    {
                        required: true,
                        validator: validateUrl,
                        trigger: 'blur',
                    },
                ]"
            >
                <el-input
                    v-model="formData.jumpLinkUrl"
                    placeholder="请输入跳转地址"
                ></el-input>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button
                type="primary"
                @click="submitForm"
                :disabled="formLoading"
                >确 定</el-button
            >
            <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { addLand, editLand, getLandTemplate } from "@/api/land/index";
export default {
    data() {
        return {
            // 弹出层标题
            dialogTitle: "",
            // 是否显示弹出层,
            dialogVisible: false,
            formLoading: false,
            isEdit: false,
            formData: {
                templateId: "",
                jumpLinkUrl: "",
                landingPageName: "",
                landingPageDesc: "",
            },
            templateList: [],
        };
    },
    methods: {
        validateUrl(rule, value, callback) {
            const reg =
                /^(https?:\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(:(\d{1,5}))?(\/[^\s]*)?$/i;
            if (value.match(reg) || value === "") {
                callback();
            } else {
                callback(new Error("请输入正确的跳转地址"));
            }
        },
        /** 打开弹窗 */
        async open(row) {
            this.dialogVisible = true;
            // 修改时，设置数据
            this.isEdit = false;
            if (row.id) {
                this.dialogTitle = "修改落地页";
                this.formData = { ...this.formData, ...row };
                this.isEdit = true;
            } else {
                this.dialogTitle = "新增落地页";
            }
        } /** 提交按钮 */,
        async submitForm() {
            // 校验主表
            await this.$refs["formRef"].validate();
            this.formLoading = true;
            try {
                const data = this.formData;
                // 修改的提交
                if (data.id) {
                    await editLand(data);
                    this.$modal.msgSuccess("修改成功");
                    this.dialogVisible = false;
                    this.$emit("success");
                    return;
                }
                // 添加的提交
                await addLand(data);
                this.$modal.msgSuccess("新增成功");
                this.dialogVisible = false;
                this.$emit("success");
            } finally {
                this.formLoading = false;
            }
        },

        /** 表单重置 */
        reset() {
            this.formData = {
                templateId: "",
                jumpLinkUrl: "",
                landingPageName: "",
                landingPageDesc: "",
            };
            this.resetForm("formRef");
        },
        handleClose() {
            this.reset();
        },
        
        async getLandTemplates() {
            const { code, data } = await getLandTemplate();
            if (code === 0) {
                this.templateList = data.list;
                console.log(this.templateList);
            }
        },
    },
    created() {
        this.getLandTemplates();
    },
};
</script>
